<template>
  <div class="forum-container">
    <!-- 金字塔排行榜 -->
    <div class="pyramid-rank" @click="toweb">
      <div class="rank-tier tier-3">
        <span class="rank-number">太空机长</span>
        <span class="rank-name">——————排行榜——————</span>
        <span class="rank-score">星历{{nowDate}}</span>
      </div>
    </div>

    <!-- 下载按钮 -->
    <el-button class="download-btn" type="success" @click="downloadFile">战场传送门</el-button>

    <!-- 主内容区 -->
    <div class="main-content">
      <!-- 左侧个人信息 -->
      <div class="user-panel">
        <div class="user-profile">
          <img class="avatar" src="/src/assets/tx.jpg" alt="用户头像">
          <h3 class="username">{{ user.username }}</h3>
          <p class="user-title">星云驾驶员</p>
          <div class="user-stats">
            <div class="stat-item">
              <span class="stat-label">战斗次数</span>
              <span class="stat-value">42</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">最高分</span>
              <span class="stat-value">1730</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧论坛 -->
      <div class="forum-panel">
        <!-- 发帖区域 -->
        <el-form class="post-editor">
          <el-input
            class="neon-textarea"
            type="textarea"
            placeholder="向银河系广播你的讯息..."
            :rows="4"
            v-model="newPostContent"
          ></el-input>
          <el-button 
            class="quantum-btn" 
            type="primary"
            @click="createPost"
          >
            量子传送
          </el-button>
        </el-form>

        <!-- 加载状态 -->
        <div v-if="loading" class="loading">
          <el-skeleton :rows="3" animated />
        </div>

        <!-- 错误信息 -->
        <div v-if="error" class="error-message">
          <el-alert
            title="加载失败"
            type="error"
            :description="error.message"
            show-icon
          />
        </div>

        <!-- 帖子列表 -->
        <div v-else class="post-list">
          <div 
            class="post-item" 
            v-for="post in posts" 
            :key="post.post_id"
          >
            <div class="user-info">
              <img 
                class="avatar" 
                src="/src/assets/tx.jpg" 
                alt="用户头像"
              >
              <div class="user-meta">
                <span class="username">{{ post.user.username }}</span>
                <span class="post-time">{{ formatDate(post.created_at) }}</span>
              </div>
            </div>
            <div class="post-title">
              {{ post.title }}
            </div>
            <div class="post-content">
              {{ post.content }}
            </div>
            <div class="post-meta">
              <span class="likes">♥ 0</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import router from '@/router';
import { ref, onMounted } from 'vue';
import { getAllPosts } from '@/api/post';
import { ElMessage } from 'element-plus';

// 模拟用户数据
const user = {
  username: 'Nuyoah'
};

// 帖子相关状态
const posts = ref([]);
const newPostContent = ref('');
const loading = ref(true);
const error = ref(null);
// 当前日期
const nowDate = ref('');

// 获取当前日期
const formatCurrentDate = () => {
  const date = new Date();
  const year = date.getFullYear();
  const month = date.getMonth() + 1; // 月份从0开始
  const day = date.getDate();
  return `${year}.${month}.${day}`;
};

// 格式化日期
const formatDate = (isoDate: string): string => {
  const date = new Date(isoDate);
  return `星历${date.getFullYear()}.${date.getMonth() + 1}.${date.getDate()} ${date.getHours()}:${date.getMinutes()}`;
};

// 获取所有帖子
const fetchPosts = async () => {
  try {
    const result = await getAllPosts();
    if (result.success) {
      posts.value = result.data;
    } else {
      throw new Error('获取帖子失败');
    }
  } catch (err: any) {
    error.value = err;
    ElMessage.error(`加载帖子失败: ${err.message}`);
  } finally {
    loading.value = false;
  }
};

// 创建新帖子
const createPost = () => {
  if (!newPostContent.value.trim()) {
    ElMessage.warning('帖子内容不能为空');
    return;
  }

  // 这里应该是发送到后端的逻辑
  // 为了演示，我们直接添加到列表
  const newPost = {
    post_id: Date.now(),
    user: user,
    content: newPostContent.value,
    created_at: new Date().toISOString()
  };

  posts.value.unshift(newPost);
  newPostContent.value = '';
  ElMessage.success('帖子发布成功');
};

// 下载文件
const downloadFile = () => {
  // 安装包文件名为 `SpaceCaptain.zip`，存放在打包后静态文件夹 `/dist/dist` 下
  const installPackageUrl = '/dist/SpaceCaptain.zip'; 

  // 创建一个 a 标签并触发下载
  const link = document.createElement('a');
  link.href = installPackageUrl;
  link.download = 'SpaceCaptain.zip'; // 设置下载文件名
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};

function toweb(){
      router.push({ name: 'Ranking' });
      setTimeout(() => {
        window.location.reload();
      }, 1000);
    }

// 页面加载时获取帖子
onMounted(() => {
  fetchPosts();
  nowDate.value = formatCurrentDate();
});
</script>

<style>
/* 基础样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', sans-serif;
}

body {
  background: #0a0e1a;
  color: rgba(255,255,255,0.9);
  position: relative; /* 添加相对定位 */
  min-height: 100vh; /* 确保页面高度至少为视口高度 */
  overflow: hidden; /* 防止页面整体滚动 */
}

/* 添加半透明背景图片 */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('/src/assets/bg.jpg') no-repeat center center; /* 替换为你的背景图片路径 */
  background-size: cover;
  /* opacity: 0.2; 半透明效果，可以根据需要调整透明度 */
  z-index: -1; /* 确保背景图片在内容下方 */
}

/* 金字塔排行榜 */
.pyramid-rank {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
}

.rank-tier {
  background: rgba(16, 22, 36, 0.9);
  border: 1px solid rgba(87,160,255,0.3);
  border-radius: 8px;
  padding: 10px;
  margin: 8px 0;
  backdrop-filter: blur(8px);
  transition: all 0.3s;
  cursor: pointer;
}

.tier-3 {
  width: 460px;
  transform: translateY(30px);
}

.rank-tier:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 25px rgba(87,160,255,0.2);
}

/* 主内容布局 */
.main-content {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 30px;
  max-width: 1200px;
  margin: 180px auto 0;
  padding: 20px;
  overflow-y: auto; /* 内容可滚动 */
  height: calc(100vh - 180px); /* 确保内容高度不超过视口高度 */
}

/* 用户面板 */
.user-panel {
  background: rgba(16, 22, 36, 0.9);
  border-radius: 15px;
  padding: 20px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(87,160,255,0.2);
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 20px;
}

.username {
  color: #57a0ff;
  text-align: center;
  margin-bottom: 10px;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 20px;
}

/* 帖子样式 */
.post-item {
  background: rgba(16, 22, 36, 0.9);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(87,160,255,0.2);
  transition: all 0.3s;
}

.post-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 25px rgba(87,160,255,0.1);
}

.neon-textarea {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid #57a0ff;
  border-radius: 8px;
  padding: 15px;
  color: #fff;
  margin-bottom: 20px;
  min-height: 100px;
}

.quantum-btn {
  background: linear-gradient(135deg, #57a0ff, #ff47a0);
  border: none;
  padding: 12px 30px;
  color: white;
  border-radius: 25px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/* 发光效果 */
.post-item::after {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(45deg, #57a0ff, #ff47a0);
  z-index: -1;
  filter: blur(10px);
  opacity: 0.3;
}

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.error-message {
  margin: 20px 0;
}

/* 下载按钮样式 */
.download-btn {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 100;
  background: linear-gradient(135deg, #57a0ff, #ff47a0);
  border: none;
  padding: 12px 30px;
  color: white;
  border-radius: 25px;
  cursor: pointer;
  /* position: relative; */
  overflow: hidden;
}
</style>